<template>
	<view class="container auto w750">
		<!-- 亮点的盒子 -->
		<view class="posir dflex jcc">
			<!-- 背景图 -->
			<view class="container-bgimg textc auto white posia">本产品亮点</view>
			<view class="container-box mt30">
				<!-- 第一板块 -->
				<view class="auto mt20">
					<view v-for="(item, index) in props.dataList" :key="item.id" class="container-item">
						<view class=" dflex alc ml25" v-if="item.title">
							<image src="../../static/box.png" style="width: 40rpx;height:40rpx"></image>
							<view class="ml16 fs26 fw600" style="color: #8A4620;">{{ item.title }}</view>
						</view>
						<view
						v-if="item.title"
							style="width: 545rpx;line-height: 53rpx;color: #693113;margin-left: 80rpx;"
							class="mt16 fs26"
						>
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 亮点的盒子 -->
	</view>
</template>

<script setup>
import { ref, defineProps, nextTick } from 'vue';
const props = defineProps({
	dataList: {
		type: Array,
		default: []
	}
});
</script>

<style lang="scss" scoped>
.container {
	background-color: rgba(248, 230, 225, 1);
	.container-bgimg {
		background-image: url('../../static/title-image.png');
		width: 277rpx;
		height: 68rpx;
		line-height: 68rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.container-box {
		width: 690rpx;
  padding-bottom: 20rpx;
		background: #fff8ed;
		border-radius: 30rpx;
		& > view {
			width: 650rpx;

			border-radius: 15rpx;
			border: 2rpx solid rgba(235, 97, 18, 0.32);
		}
		.container-item:first-child {
			margin-top: 60rpx !important;
		}
		.container-item {
			padding-bottom: 42rpx;
		}
		.container-item:last-child {
			padding-bottom: 0rpx !important;
		}
		.container-item:last-child {
			margin-top:0rpx !important;
		}
	}
}
</style>
